<template>
  <section v-if="!isEdit" class="f-order-sale-detail w-card">
    <div class="title-box">
      <span class="title-text">商品详情</span>
      <div>
        <el-button type="primary" plain @click="isEdit = true">编辑</el-button>
        <!-- <el-button v-if="formData.shelveStatus == 1" type="danger" plain @click="settingHandle(1)">下架</el-button>
        <el-button v-else type="success" plain @click="settingHandle(0)">上架</el-button> -->
      </div>
    </div>

    <div class="f-card">
      <p class="f-title">基础信息-{{formData.productId || '--'}}</p>
      <ul class="f-ul">
        <li>
          <p>商品名称：</p>
          <p>{{formData.name || '--'}}</p>
        </li>
        <li>
          <p>商品状态：</p>
          <p :style="{color: formData.status == 1? '#2DB613': '#F73E3E'}">{{ formData.status == 1? '上架': '下架' }}</p>
        </li>
        <li>
          <p>起始价格：</p>
          <p>{{formData.startPrice/100}}元</p>
        </li>
        <li>
          <p>最高价格：</p>
          <p>{{formData.maxPrice/100}}元</p>
        </li>
        <li>
          <p>限制年限：</p>
          <p>{{formData.limitYears}}</p>
        </li>
        <li>
          <p>商品标题：</p>
          <p>{{formData.title}}</p>
        </li>
        <li>
          <p>商品标签：</p>
          <el-tag style="margin-right: 10px;" v-for="tag in formData.tags" :key="tag" :disable-transitions="false" size="large">
            {{ tag.tagName }}
          </el-tag>
        </li>
        <li>
          <p>创建时间：</p>
          <p>{{ getDateTime(formData.createTime)[6] || '--'}}</p>
        </li>
        <li>
          <p>列表展示小图：</p>
          <el-image style="width: 125px; height: 125px" :src="formData.smallImage" :zoom-rate="1.2" :max-scale="7"
            :min-scale="0.2" fit="fill" :preview-src-list="[formData.smallImage]" />
        </li>
        <li>
          <p>详情展示大图：</p>
          <el-image style="width: 175px; height: 125px" :src="formData.largeImage" :zoom-rate="1.2" :max-scale="7"
            :min-scale="0.2" fit="fill" :preview-src-list="[formData.largeImage]" />
        </li>
      </ul>
    </div>

    <div class="f-card">
      <p class="f-title">分佣规则</p>
      <ul class="f-ul" style="margin-bottom: 40px;" v-for="(item,index) in scenarioCommissionStrategies"
        :key="item.commissionStrategyId">
        <li style="width: 100%;">{{ index+1 }}、{{ sceneType[item.sceneType] }}：</li>
        <li style="width: 20%">
          <p>规则名称：</p>
          <p>{{item?.commissionStrategy?.strategyName || '--'}}</p>
        </li>
        <li style="width: 20%">
          <p>总代：</p>
          <p>{{item?.commissionStrategy?.totalAgentRate/100 || '--'}}%</p>
        </li>
        <li style="width: 20%">
          <p>维修店直销：</p>
          <p>{{item?.commissionStrategy?.directSalesRate/100 || '--'}}%</p>
        </li>
        <li style="width: 20%">
          <p>维修店间推：</p>
          <p>{{item?.commissionStrategy?.indirectSalesRate/100 || '--' }}%</p>
        </li>
        <li style="width: 20%">
          <p>个体推广：</p>
          <p>{{item?.commissionStrategy?.individualPromotionRate/100 || '--' }}%</p>
        </li>
      </ul>
    </div>

    <div class="f-card">
      <p class="f-title">投保信息</p>
      <ul class="f-ul">
        <li>
          <p>发票价范围：</p>
          <p>{{insuranceRequirement.invoicePriceRange || '--'}}</p>
        </li>
        <li>
          <p>公里数限制：</p>
          <p>{{insuranceRequirement.mileageLimit || '--'}}</p>
        </li>
        <li>
          <p>服务年限：</p>
          <p>{{insuranceRequirement.serviceYears || '--'}}</p>
        </li>
        <li>
          <p>车龄限制：</p>
          <p>{{insuranceRequirement.vehicleAgeLimit || '--'}}</p>
        </li>
        <li>
          <p>车型要求：</p>
          <p>{{insuranceRequirement.vehicleModelRequirement || '--'}}</p>
        </li>
        <li>
          <p>质保期要求：</p>
          <p>{{insuranceRequirement.warrantyRequirement || '--'}}</p>
        </li>
        <li>
          <p>车主类型：</p>
          <p>
            <span v-for="item in insuranceRequirement.ownerTypes">
              {{ ownerTypesName[item] }}<span
                v-if="insuranceRequirement.ownerTypes.length > 1 && insuranceRequirement.ownerTypes.length != index + 1">，</span>
            </span>
          </p>
        </li>
        <li>
          <p>车辆性质：</p>
          <p>
            <span v-for="(item,index) in insuranceRequirement.vehicleNatures">
              {{ vehicleNaturesName[item] }}<span
                v-if="insuranceRequirement.vehicleNatures.length > 1 && insuranceRequirement.vehicleNatures.length != index + 1">，</span>
            </span>
          </p>
        </li>
      </ul>
    </div>

    <div class="f-card">
      <p class="f-title">保费计算</p>
      <ul class="f-ul f-mb-20" v-for="item in premiumCalculations">
        <li>
          <p>服务年限：</p>
          <p>{{item.serviceYears || '--'}}年</p>
        </li>
        <li>
          <p>保费比例：</p>
          <p>{{item.premiumRate || '--'}}‱</p>
        </li>
        <li>
          <p>固定其他费用：</p>
          <p>{{item.fixedFee || '--'}}分</p>
        </li>
      </ul>
    </div>

    <div class="f-card">
      <p class="f-title">富文本</p>
      <ul class="f-ul f-mb-20" v-for="item in richTexts">
        <li>
          <p>富文本类型：</p>
          <p>{{ contentType[item.contentType] }}</p>
        </li>
        <li>
          <p>富文本详情：</p>
          <p v-html="item.content"></p>
        </li>
      </ul>
    </div>
  </section>

  <Goods-Edit v-else :isEdit="isEdit" :formData="formData" @setModify="getDetail" @cancelEdit="isEdit = false"></Goods-Edit>
</template>

<script>
import { ref, reactive, toRefs, onMounted, watch, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStateStore } from '@/store'
import { getWindowWidthAndHeight, warningDeal, getDateTime, successDeal, BlobDownLoad } from '@/utils/utils'
import api from './api.js'
import GoodsEdit from './add.vue'
import confirmPassword from '@/components/confirmPass.vue'

export default {
  components: { GoodsEdit, confirmPassword },

  setup(props, context) {
    const store = useStateStore()

    const router = useRouter()
    const route = useRoute();

    const confirmPasswordRef = ref(null)

    const state = reactive({
      isEdit: false,

      productId: route.query.productId,
      formData: {},

      tableData: [],
      page: 1,
      size: 10,
      total: 0,

      incomeRuleList: [],
      inputValue: '',
      inputVisible: false,

      ownerTypesName: {},
      vehicleNaturesName: {},

      scenarioCommissionStrategies: [],
      insuranceRequirement: {},
      premiumCalculations: [],
      richTexts: [],

      contentType: {
        '1': '保障内容',
        '2': '权益内容',
        '3': '使用说明',
      },

      sceneType: {
        "1": '用户自主投保佣金规则',
        "2": '员工代客投保佣金规则',
        "3": '用户分享投保佣金规则',
      }
    })

    onMounted(() => {
      getIncomeRuleList()
      getOwnerType()
      getVehicleNature()

      nextTick(() => {
        getDetail()
      })
    })

    const getIncomeRuleList = () => {
      let json = {}
      api.incomeRuleAll(json).then(res => {
        state.incomeRuleList = res.data.list
      })
    }

    const getOwnerType = () => {
      api.ownerType().then(res => {
        let obj = {}
        res.data.forEach(item => {
          obj[item.code] = item.description
        })
        state.ownerTypesName = obj
      })
    }

    const getVehicleNature = () => {
      api.vehicleNature().then(res => {
        let obj = {}
        res.data.forEach(item => {
          obj[item.code] = item.description
        })
        state.vehicleNaturesName = obj
      })
    }

    const getDetail = () => {
      let json = {
        productId: state.productId
      }
      api.goodsDetail(json).then(res => {
        state.isEdit = false
        state.formData = res.data
        state.scenarioCommissionStrategies = res.data.scenarioCommissionStrategies
        state.insuranceRequirement = res.data.insuranceRequirement
        state.premiumCalculations = res.data.premiumCalculations
        state.richTexts = res.data.richTexts
      })
    }

    return {
      ...toRefs(state),
      confirmPasswordRef,
      getDateTime,
      getDetail,
    }
  }
}
</script>

<style lang='scss' scoped>
.f-order-sale-detail {
  box-sizing: border-box;
  padding: 20px;

  .title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-right: 10px;
    .title-text {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .f-card {
    background: #f1f4f6;
    border-radius: 6px;
    padding: 20px;
    margin-top: 18px;
    .f-title {
      font-weight: 400;
      font-size: 16px;
      color: #000000;
      margin-bottom: 25px;
      display: flex;
      justify-content: space-between;
    }
    .f-ul {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 15px 0;
      li {
        display: flex;
        width: 50%;
        font-weight: 300;
        font-size: 14px;
        color: #000000;
        p:first-child {
          color: #424242;
          width: 120px;
          text-align: right;
        }
        .f-weight-bold {
          font-weight: bold;
        }
      }
    }
  }

  .my-table-box {
    .table-handle-box {
      display: flex;
      align-items: center;
      gap: 0 20px;
    }

    .my-table-footer {
      display: flex;
      align-items: center;
      margin-top: 10px;
      flex-wrap: wrap;
      gap: 10px;
    }
  }
  .f-divider {
    height: 1px;
    border-top: 1px dashed #aaaaaa;
    margin: 32px 0 27px 0;
  }
}
</style>